<template>
  <div>
    <!-- 导入导出按钮 -->
    <div>
      <el-button
        type="primary"
        icon="Download"
        @click="dialogFormVisible = true"
      >
        导入
      </el-button>
      <el-button type="success" icon="Upload" @click="handleExportCates">
        导出
      </el-button>
    </div>
    <!-- 分类数据表格 -->
    <div>
      <el-table
        :data="cates"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="imageUrl" label="图标" #default="scope">
          <img :src="scope.row.imageUrl" alt="" style="width:30px;" />
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" />
        <el-table-column prop="status" label="状态" #default="scope">
          <el-tag :type="+scope.row.status === 1 ? 'success' : 'warning'">
            {{ +scope.row.status === 1 ? '显示' : '不显示' }}
          </el-tag>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </div>
    <!-- 导入对话框 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="导入分类">
        <el-form>
          <el-form-item label="分类文件" label-width="120px">
            <el-upload
              ref="uploadRef"
              class="upload-demo"
              :headers="header"
              :on-success="handleUploadSuccess"
              :action="updatePath"
              :auto-upload="true"
            >
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
              <template #tip>
                <div class="el-upload__tip">
                  XLS/XLSX/CSV files with a size less than 2048kb
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { GetCategoriesByPid, ExportCategories } from '@/api/category'
import { useApp } from '@/pinia/modules/app'

//导出按钮事件函数
const handleExportCates = () => {
  // 调用 ExportCategoryData() 方法获取导出数据
  ExportCategories().then(res => {
    // 创建 Blob 对象，用于包含二进制数据
    const blob = new Blob([res])
    // 创建 a 标签元素，并将 Blob 对象转换成 URL
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    // 设置下载文件的名称
    link.download = '分类数据.xlsx'
    // 模拟点击下载链接
    link.click()
  })
}

//导入对话框属性&函数
const dialogFormVisible = ref(false)
const updatePath = 'http://localhost:8501/admin/product/category/import'
const header = { token: useApp().authorization.token }
//上传成功的回调
const handleUploadSuccess = r => {
  if (+r.code === 200) {
    ElMessage.success('导入成功')
  } else {
    ElMessage.error(r.message)
  }
  dialogFormVisible.value = false
  initPageData()
}
onMounted(() => {
  initPageData()
})
const cates = ref([])
//查询第一级分类集合
const initPageData = async () => {
  const { data } = await GetCategoriesByPid(0)
  cates.value = data.items
}
//表格懒加载函数
const load = async (row, treeNode, resolve) => {
  // console.log(row)
  const { data } = await GetCategoriesByPid(row.id)
  // console.log(data.items)
  resolve(data.items)
}
</script>
